<template>
	<div class="">
		<div class="container">

			<div class="search_box">
				<input type="text" autocomplete="off" v-model="word" class="form-control search_inp"
					placeholder="这里输入科室名称">

				<div class="input-cont" style="margin-left:10px;width: 170px;" v-if="userNames == 'admin'">
					<input type="text" class="form-control" readonly v-model="engname" placeholder="操作人">

					<img src="@assets/images/close.png" class="clears" alt="" v-if="engname" @click="engname = '';">
					<span class="iconfont icon-list" data-toggle="modal" data-target="#keshi"
						@click="user_alert=!user_alert;getrooms();getalluserlist()"></span>
				</div>

				<el-date-picker prefix-icon='none' style="width: 120px;margin-left: 10px;" v-model="createStartDate"
					type="date" @change="changedate(1)" value-format="timestamp" placeholder="开始日期">
				</el-date-picker>
				<el-date-picker prefix-icon='none' style="width: 120px;margin-left: 10px;" v-model="createEndDate"
					type="date" @change="changedate(2)" value-format="timestamp" placeholder="结束日期">
				</el-date-picker>


				<div class="sea_btn sear_btns" @click="page=1;names=word;realName = engname;getlist()">
					<img src="@assets/images/search.png" alt="">
					查询
				</div>
			</div>
			<div class="table-responsive mt-20">
				<h2 class="tcent" v-if="list.length ==0">暂时没有数据</h2>
				<table class="table table-hover" v-else>
					<tr>
						<th>时间</th>
						<th>姓名</th>
						<th>账号</th>
						<th>科室</th>
						<th>操作</th>
						<th>详细信息</th>
					</tr>

					<tr v-for="item,index in list">
						<td>{{item.createDate}}</td>
						<td>{{item.realName}}</td>
						<td>{{item.username}}</td>
						<td>{{item.deptName}}</td>
						<td>{{item.operation}}</td>
						<td style="max-width: 600px;word-wrap: break-word;">{{item.detail}}</td>
					</tr>
				</table>

				<div class="page_box">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="page" :page-sizes="[10, 30, 60, 100]" :page-size="limit"
						layout="total, sizes, prev, pager, next, jumper" :total="inglen">
					</el-pagination>
				</div>
			</div>
		</div>


		<!--报修人-->
		<div :class="user_alert?'modal in fade':'modal fade'" role="dialog"
			:style="user_alert?' align-items: center;justify-content: center;display: flex;z-index:199;':'z-index:199'"
			id="engineer">
			<div class="cent w700" style="height: 865px;max-width: 955px;width: 955px;max-height:calc(100vh - 50px)">
				<div class="modal-dialog" role="document">
					<div class="modal-content" style="overflow: visible;">
						<div class="modal-header tit">
							<em></em>选择操作人
							<div class="right" @click="closeusertalert">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
										class="iconfont icon-cha" aria-hidden="true"></span> </button>
							</div>
						</div>
						<!--表单-->
						<div class="modal-body h100" style="overflow-x: hidden;overflow-y:scroll;height:760px;max-height:calc(100vh - 150px)">
							<div class="left">
								<div class="zTreeDemoBackground">
									<ul id="treeDemo4" class="ztree" @select="choseroom_user"></ul>
								</div>
							</div>
							<div class="right" style="overflow: visible;">
								<div class="search">
									<!-- <form> -->
									<div class="form-group" style="display: flex;padding-right: 0;">
										<input class="form-control" autocomplete="off"
											@keydown.enter="page2=1;getalluserlist()" v-model="word_user"
											placeholder="输入关键字">
										<div style="margin-left: 10px;" class="btn btn-success"
											@click="page2=1;getalluserlist()">
											<span class="iconfont icon-chaxun"
												style="line-height: 34px;vertical-align: baseline;"></span>
										</div>
									</div>
									<!-- </form> -->
								</div>

								<div class="enr_alert_scorll">
									<div style="height: 552px;">
										<h2 class="tcent" v-if="user_all.length ==0">暂时没有数据</h2>
										<table class="table table-hover smallTab" v-else>
											<tr>
												<th></th>
												<th>账号</th>
												<th>姓名</th>
												<th>电话</th>
											</tr>
											<tr v-for="item,index in user_all">
												<td>
													<input type="radio" v-model="userid" :value="item.id"
														@change="changechose(item.realName)" name="chose2"
														:id="'c'+item.id"><label :for="'c'+item.id"></label>
												</td>
												<td>{{item.userName}}</td>
												<td>{{item.realName}}</td>
												<td>{{item.phoneNo}}</td>
											</tr>
										</table>
									</div>
									<div class="Spage" style="margin: 20px 0;">
										<el-pagination @current-change="handleCurrentChange2" :current-page="page2"
											style="display: flex;justify-content: center;" :pager-count="5"
											:page-size="10" layout="prev, pager, next" :total="inglen2">
										</el-pagination>
									</div>

									<div class="tcent" style="margin-bottom: 30px;">
										<button class="btn btn-primary" @click="sure_user">确定</button>&emsp;
										<button class="btn btn-default" @click="closeusertalert">关闭</button>
									</div>
								</div>


							</div>
						</div>
					</div>
				</div>
			</div>
		</div>


	</div>
</template>

<script>
	export default {
		name: "",
		data() {
			return {
				did: "",
				userid: "",
				showadd: false,
				showzzc: false,
				user_alert: false,
				page2: 1,
				page: 1,
				list: [],
				user_all: [],
				inglen: 0,
				inglen2: 0,
				limit: 10,
				limit2: 10,
				num: 1,
				num2: 1,
				word: "",
				word_user: "",
				createStartDate: "",
				createEndDate: "",
				engname: sessionStorage.getItem('userName') != 'admin' ? sessionStorage.getItem('realName') : "",
				names: "",
				realName: sessionStorage.getItem('userName') != 'admin' ? sessionStorage.getItem('realName') : "",
				zNodes_u: [],
				ztree_obj_u: {},
				treeClickCount4: 0,
				setting_u: {
					treeId: 'id',
					data: {
						key: {
							name: 'name'
						}
					},
					callback: {
						onClick: this.choseroom_user
					}
				},
				userNames: sessionStorage.getItem('userName')
			}
		},
		mounted() {
			this.getlist();
			this.getalluserlist();
		},
		methods: {
			changedate(ty) {
				if (this.createStartDate && this.createEndDate && this.createStartDate > this.createEndDate) {
					this.$Toast('选择的结束日期在开始日期之前');
					if (ty == 1) {
						this.createStartDate = ''
					} else {
						this.createEndDate = ''
					}
					return
				}
			},
			changechose(name) {
				this.engname = name
			},
			handleCurrentChange2(val) {
				console.log(`当前页: ${val}`);
				this.page2 = val
				this.getalluserlist()
			},
			sure_user() {
				this.user_alert = false
				this.did = ''
				this.userid = ''
				this.ztree_obj_u.cancelSelectedNode();
				this.getalluserlist()
			},
			closeusertalert() {
				this.user_alert = false
				// this.engname = ''
				this.word_user = ''
				this.did = ''
				this.userid = ''
				this.ztree_obj_u.cancelSelectedNode();
				this.getalluserlist()
			},
			// 上一页
			prev() {
				if (this.page2 <= 1) {
					return
				}
				this.page2 = this.page2 - 1;
				this.getalluserlist()
			},
			// 下一页
			next() {
				if (this.page2 >= this.num2) {
					return
				}
				this.page2 = this.page2 + 1;
				this.getalluserlist()
			},
			// 科室树状图选择
			choseroom_user(data, node, treeNode) {
				this.treeClickCount4++;
				if (this.treeClickCount4 >= 2) {
					return;
				}
				this.timer = window.setTimeout(() => {
					if (this.treeClickCount4 == 1) {
						this.treeClickCount4 = 0;
						console.log('单击事件,可在此处理对应逻辑')
						// this.engname = treeNode.name
						this.did = treeNode.id

						this.page2 = 1
						this.getalluserlist()

					} else if (this.treeClickCount4 > 1) {
						this.treeClickCount4 = 0;

						this.ztree_obj_u.cancelSelectedNode();
						console.log('双击事件,可在此处理对应逻辑')
					}
				}, 300);
			},
			getalluserlist() {
				var id = ''

				var that = this
				var url = encodeURI(this.$url + '/sys/user/list?page=' + this.page2 + '&limit=' + this.limit2 +
					'&deptId=' + this.did + '&userName=' + this.word_user)
				this.$http.get(url)
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.user_all = response.data.data.records
						// for (var i = 0; i < that.user_all.length; i++) {
						// 	that.user_all[i].chosesf = false
						// }
						that.inglen2 = response.data.data.total
						that.num2 = response.data.data.pages
					})
					.catch(function(error) {
						console.log(error);
						// sessionStorage.setItem('token','undefined')
						// that.$router.push('/login')
					});
			},
			// 获取科室
			getrooms() {
				var param = {
					parentId: 0
				}
				var that = this
				this.$http.post(this.$url + '/sys/dept/tree', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}

						that.zNodes = response.data.data
						that.ztree_obj = $.fn.zTree.init($("#treeDemo"), that.setting, that.zNodes);
						var nodes = that.ztree_obj.getNodes();
						for (var i = 0; i < nodes.length; i++) { //设置节点展开
							that.ztree_obj.expandNode(nodes[i], true, false, true);
						}
						that.zNodes_u = response.data.data
						that.ztree_obj_u = $.fn.zTree.init($("#treeDemo4"), that.setting_u, that.zNodes_u);
						var nodes = that.ztree_obj_u.getNodes();
						for (var i = 0; i < nodes.length; i++) { //设置节点展开
							that.ztree_obj_u.expandNode(nodes[i], true, false, true);
						}
					})
					.catch(function(error) {
						console.log(error);
						// sessionStorage.setItem('token','undefined')
						// that.$router.push('/login')

						that.$Toast('网络拥堵，刷新一下');
					});

			},

			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.limit = val
				this.getlist()
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.page = val
				this.getlist()
			},
			//显示当前时间（年月日时分秒）
			timeFormate(timeStamp) {
				let year = new Date(timeStamp).getFullYear();
				let month = new Date(timeStamp).getMonth() + 1 < 10 ? "0" + (new Date(timeStamp).getMonth() + 1) :
					new Date(timeStamp).getMonth() + 1;
				let date = new Date(timeStamp).getDate() < 10 ? "0" + new Date(timeStamp).getDate() : new Date(timeStamp)
					.getDate();
				let hh = new Date(timeStamp).getHours() < 10 ? "0" + new Date(timeStamp).getHours() : new Date(timeStamp)
					.getHours();
				let mm = new Date(timeStamp).getMinutes() < 10 ? "0" + new Date(timeStamp).getMinutes() : new Date(
					timeStamp).getMinutes();
				let ss = new Date(timeStamp).getSeconds() < 10 ? "0" + new Date(timeStamp).getSeconds() : new Date(
					timeStamp).getSeconds();
				let week = new Date(timeStamp).getDay();
				let weeks = ["日", "一", "二", "三", "四", "五", "六"];
				// + " " + " " + hh + ":" + mm + ':' + ss
				return year + "-" + month + "-" + date;
			},
			getlist() {
				this.showloading = true
				this.choseall = false

				var param = {
					page: this.page,
					limit: this.limit,
					deptName: this.names,
					realName: this.realName,
					createDate_begin: this.createStartDate ? this.timeFormate(this.createStartDate) : '',
					createDate_end: this.createEndDate ? this.timeFormate(this.createEndDate) + '23:59:59' : "",
				}
				var that = this
				this.$http.post(this.$url + '/sys/log/select', this.$qs.stringify(param))
					.then(function(response) {
						if (response.data.code == '1410') {
							that.$Toast(response.data.msg);
							sessionStorage.setItem('token', '')
							that.$router.push('/login')
							return
						}
						that.list = response.data.data.records
						that.inglen = response.data.count
						if (that.inglen > that.limit) {
							that.num = Math.ceil(that.inglen / that.limit)
						} else {
							that.num = 1
						}
						that.showloading = false
					})
					.catch(function(error) {
						console.log(error);

						that.$Toast('网络拥堵，刷新一下');
					});

			},
		}
	}
</script>

<style lang='less' scoped>
	/deep/.el-input--prefix .el-input__inner {
		padding-left: 12px;
		padding-right: 12px;
	}

	.input-cont:hover .clears {
		display: block;
	}

	.clears {
		width: 10px;
		position: absolute;
		right: 35px;
		top: 14px;
		display: none;
		cursor: pointer;
	}

	.w700 {
		width: 700px;
	}

	td,
	th {
		font-size: 14px;
		color: #333;
		/* line-height: 22px; */
		padding: 10px;
		border-top: 0;
		border-bottom: 1px solid #eee;
	}

	.search_inp {
		width: 255px;
		margin-bottom: 0;
	}

	/deep/ .el-pagination__total {
		height: 33px !important;
		line-height: 33px !important;
	}

	/deep/ .el-input--mini .el-input__inner {
		height: 33px;
	}

	/deep/.el-pagination__editor.el-input .el-input__inner {
		height: 33px;
	}

	.page_box {
		display: flex;
		justify-content: flex-end;
		margin-top: 30px;
	}

	/deep/ .el-pagination .btn-prev {
		border: 1px solid #ccc;
		padding: 0;
		border-right: none;
		min-width: 33px;
		height: 33px;
		padding-top: 2px;
	}

	/deep/ .el-pagination .btn-next {
		border: 1px solid #ccc;
		padding: 0;
		border-left: none;
		min-width: 33px;
		height: 33px;
		padding-top: 2px;
	}

	/deep/ .el-pager li {
		border: 1px solid #ccc;
		padding: 0;
		border-right: none;
		min-width: 33px;
		height: 33px;
		line-height: 33px;
	}

	/deep/ .el-pager li:nth-last-of-type(1) {
		border-right: 1px solid #ccc;
	}

	/deep/ .el-pager li.active {
		border: #4286f5 1px solid;
		background: #4286f5;
		color: #fff;
	}

	.pages {
		display: flex;
		justify-content: flex-end;
		margin-top: 10px;
	}
</style>
